<script setup>
import Comments from '@/components/comments.vue'
import { reactive, ref } from 'vue'
import { useUserStore } from '@/stores/user';
import {addCommentApi,selectUserCommentApi,delCommentApi} from '@/api/commend'
import { ElMessage } from 'element-plus';
const userStore = useUserStore()
const count = ref(0)
const load = () => {
  count.value += 2
}

const commentInfo = reactive({
  commentList:[],
  pageInfo:{}
})
const commentList = ref({})

//获取登录用户的个人信息
const userInfo = userStore.userInfo

getCommentList(userInfo.id,0)
async function getCommentList(userId,page){
  try{
    const resp = await selectUserCommentApi(userId,page)
    if(resp.data.code === 200){
      if(page === 0){
        commentInfo.commentList = []
      }
      commentInfo.pageInfo = resp.data.data.page
      commentList.value =  resp.data.data.content
      commentList.value.forEach(comment => {
        commentInfo.commentList.push(comment)
      });
    }
  }catch(e){
    console.log(e)
  }
}
//删除评论
const onDelReplay = async (id)=>{
  try{
    const resp = await delCommentApi(id)
    console.log(resp)
    if(resp.data.code === 200){
      ElMessage.success('删除成功')
      getCommentList(userInfo.id,0)
    }
  }catch(e){
    console.log(e)
  }
   
}
//获取更多评论
const loadMore = (pageInfo)=>{
  console.log(pageInfo)
  if(pageInfo.totalElements === 1 || pageInfo.number+1 >= pageInfo.totalPages){
    return
  }else{
    getCommentList(userInfo.id,pageInfo.number+1)
  }
}
</script>
<template>
  <div class="comment-box">
     <Comments
    @onDelReplay="onDelReplay"
    @loadMore="loadMore"
    :commentInfo="commentInfo"
    :postUserId="userInfo.id"
    :showReplay="false"
    >
    </Comments> 
  </div>
</template>
<style lang="scss" scoped>
.comment-box{
  height: 76dvh;
  overflow: scroll;
}
::-webkit-scrollbar{
    display: none;
}
</style>